<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title></title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
    <!--对话框-->
    <link rel="stylesheet" href="/js/jconfirm/jquery-confirm.min.css">
    <style>
        .input-with-icon {
            position: relative;
            padding-left: 20px;
            top: -5px;
            display: inline-block;
            vertical-align: middle;
            /* 确保这个div与其他行内元素垂直对齐 */
        }

        .input-with-icon input.btn-default {
            padding-left: 40px;
            /* 根据图标大小调整 */
        }

        .input-with-icon .icon {
            position: absolute;
            right: 5px;
            /* 根据需要调整 */
            top: 50%;
            transform: translateY(-50%);
            /* 垂直居中 */
            pointer-events: none;
            /* 防止点击图标时触发input的点击事件 */
        }
        /* 添加图标的链接样式 */

        .add-item {
            display: inline-block;
            margin-left: 10px;
            /* 与输入框保持间距 */
            text-decoration: none;
            /* 去除下划线 */
            color: #007bff;
            /* 假设链接颜色为蓝色 */
            /* 其他样式，如字体大小、鼠标悬停效果等 */
        }

        .add-item i {
            font-size: 1.5rem;
            /* 假设您想要图标稍大一些 */
            /* 其他图标样式 */
        }
        /* 根据需要添加其他样式 */
    </style>
</head>

<body>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">

        <!--导入头部信息-->
        <div id="header"></div>
        <script>$("#header").load("/header.html")</script>
        <!--导入左侧菜单栏-->
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">
            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="main.html"><img src="/images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <!--导入菜单栏-->
                <!--引入left-menu.html页面中的 th:fragment="leftMenu" 部分代码-->
                <div th:replace="/system/common/left :: leftMenu"></div>
                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2019. <a target="_blank"
                                                                   href="http://lyear.itshubao.com">IT书包</a>
                        All rights reserved.</p>
                </div>
            </div>
        </aside>
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header"><h4>添加商品</h4></div>
                            <div class="card-body">
                                <form action="add" id="menu-add-form" method="post" class="row">
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">上级分类</span>
                                        <select name="pmsId" class="form-control" id="type">
                                            <option value="0">请选商品分类</option>
                                            <div th:if="${!#lists.isEmpty(firstTypes)}" th:each="firstTypes:${firstTypes}">
                                                <option th:value="${firstTypes.catId}" style="font-weight:bold;">[[${firstTypes.name}]]</option>
                                                <div th:if="${!#lists.isEmpty(secondTypes)}" th:each="secondTypes:${secondTypes}">
                                                    <div th:if="${secondTypes.parentCid == firstTypes.catId}">
                                                        <option th:value="${secondTypes.catId}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[[${secondTypes.name}]]</option>
                                                        <div th:if="${!#lists.isEmpty(thirdTypes)}" th:each="thirdTypes:${thirdTypes}">
                                                            <div th:if="${thirdTypes.parentCid == secondTypes.catId}">
                                                                <option th:value="${thirdTypes.catId}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[[${thirdTypes.name}]]</option>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </select>
                                    </div>
                                    <div>
                                        <select name="goodsTypeId" class="form-control" id="shopType">
                                            <option value="0">请选商品分类</option>
                                                <div th:if="${!#lists.isEmpty(allShopType)}" th:each="allShopType:${allShopType}">
                                                        <option th:value="${allShopType.goodsTypeId}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[[${allShopType.goodsType}]]</option>
                                                </div>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label>商品图片</label>
                                        <div class="form-controls">
                                            <ul class="list-inline clearfix lyear-uploads-pic">
                                                <li class="col-xs-4 col-sm-3 col-md-2">
                                                    <figure>
                                                        <img src="/images/default-head.jpg" id="show-picture-img" alt="默认头像">
                                                    </figure>
                                                </li>
                                                <!--隐藏域：保存的是图片上传成功后的路径，目的：提交表单的时候，会把此路径提交-->
                                                <input type="hidden" name="godsImg" id="godsImg">
                                                <!--文件上传组件，当发生改变的时候执行upload方法，进行文件上传-->
                                                <input type="file" id="select-file" name="godsImg" onchange="upload('show-picture-img','godsPic')"/>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">店铺ID</span>
                                        <input type="hidden" class="form-control" id="shopId" name="shopId" th:value="${session.shopId}" placeholder="请填写菜单url" />
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">商品价格</span>
                                        <input type="text" class="form-control" id="godsPrice" name="godsPrice" value="" placeholder="请填写菜单url" />
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">商品名称</span>
                                        <input type="text" class="form-control" id="godsName" name="godsName" value="" placeholder="请填写菜单url" />
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">商品基础信息</span>
                                        <input type="text" class="form-control" id="godsInformation" name="godsInformation" value="" placeholder="请填写菜单url" />
                                    </div>

                                    <div class="input-group m-b-10">
                                        是否上架：
                                        <label class="lyear-radio radio-inline radio-primary">
                                            <input type="radio" name="listing_removal" value="0" >
                                            <span>是</span>
                                        </label>
                                        <label class="lyear-radio radio-inline radio-primary">
                                            <input type="radio" name="listing_removal" value="1" checked="">
                                            <span>否</span>
                                        </label>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <button type="button" class="btn btn-primary ajax-post" id="add-form-submit-btn">确 定</button>
                                        <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<div id="footer"></div>
<script>$("#footer").load("/footer.html")</script>
<div id="icons"></div>
<script>$("#icons").load("/icons.html")</script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //图标icon选择后的确认按钮事件

        //提交按钮监听事件
        $("#add-form-submit-btn").click(function(){
            var data = $("#menu-add-form").serialize();
            let shopId = $("#shopId").val();
            $.ajax({
                url:'/system/shop/goods/add',
                type:'POST',
                data:data,
                success:function(data){
                    if(data === "success"){
                        alert('商品添加成功!')
                        window.location.href = '/system/shop/goods/'+shopId;
                    }else{
                        alert('商品添加失败请重新添加');
                    }
                },
                error:function(response){
                    alert('网络错误!');
                }
            });
        });
    });


    //上传头像，并且获取上传后的图片路径
    function upload(show,headPic){
        let $data = new FormData(); //创建表单数据的初始化对象
        $data.append("img",$("#select-file")[0].files[0]);  //向对象中追加选择的图片数据，key：img value:选中的图片数据
        $data.append("type","godspic"); //路径中文件夹的名称 /upload/head/日期/图片名
        $.ajax({
            url:'/uploadHeadImg',
            type:'POST',
            data:$data,
            processData:false, //告诉jQuery不要处理的我的数据
            contentType:false, // 不要去设置content-type的信息
            success:function(data){  //返回值返回的是上传成功后的图片路径 成功:图片存储的路径 失败：返@回fail字符串
                if (data!=="fail"){
                    $("#shopImg").val(data); //给隐藏域赋值图片路径，目的：提交表单时候能传图片存储的路径
                    $("#show-picture-img").attr("src",data); //给默认头像的img标签重写赋值，显示上传成功后的图片
                }
            },
            error:function(data){
                alert('网络错误!');
            }
        });
    }
</script>
</body>
</html>